<template>
  <div class="container-edit" v-if="id !== -1">
    <div class="head">
      <div class="title">{{ editInfo.label }}</div>
      <el-collapse @change="handleChange" v-model="activeNames" class="set">
        <el-collapse-item title="基本设置" name="1">
          <el-form ref="form" :model="editInfo" label-width="30px">
            <el-form-item label="x">
              <el-input v-model.number="editInfo.x"></el-input>
            </el-form-item>
            <el-form-item label="y">
              <el-input v-model.number="editInfo.y"></el-input>
            </el-form-item>
            <el-form-item label="w">
              <el-input v-model.number="editInfo.w"></el-input>
            </el-form-item>
            <el-form-item label="h">
              <el-input v-model.number="editInfo.h"></el-input>
            </el-form-item>
          </el-form>
          <el-color-picker
            show-alpha
            v-model="editInfo.style['background-color']"
            @change="changeColor"
          ></el-color-picker>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="editor">
      <div class="editor-title">
        全部设置
        <i class="el-icon-rank" @click="enlarge"></i>
        <i class="el-icon-edit" @click="onEdit"></i>
      </div>
      <my-editor :wrap="true" height="300px" :options="options" :value="info" @change="changeVal"> </my-editor>
    </div>
    <el-drawer title="编辑样式" size="300px" :visible.sync="drawer" direction="rtl">
      <my-editor :wrap="true" height="300px" :options="options" :value="info" @change="changeVal"> </my-editor>
    </el-drawer>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="60%">
      <span> </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.info = JSON.stringify(this.editInfo.options, null, '\t')
  },
  data() {
    return {
      activeNames: ['1'],
      info: '',
      drawer: false,
      dialogVisible: false,
      options: {
        hScrollBarAlwaysVisible: false,
        vScrollBarAlwaysVisible: false,
      },
    }
  },
  props: {
    editColor: {
      type: String,
    },
    id: {
      type: Number,
    },
  },
  methods: {
    handleChange() {},
    changeColor(color) {},
    changeVal(val) {
     const tempObj = JSON.parse(val)
      const arr = this.showList.concat()
      const idx = arr.findIndex((item) => item.id === this.id)
      arr[idx] = {
        ...arr[idx],
        options: tempObj
      }
      console.log(arr);
      this.$store.commit('home/GET_SHOW_LIST', arr)
      console.log(this.id);
    },
    // update(fn) {
    //   const tempObj = JSON.parse(val)
    //   const arr = this.showList.concat()
    //   const idx = arr.findIndex((item) => item.id === this.id)
    //   fn(arr, idx)
    //   this.$store.commit('home/GET_SHOW_LIST', arr)
    // },
    onEdit() {
      this.drawer = true
    },
    enlarge() {
      this.dialogVisible = true
    },
  },
  computed: {
    showList() {
      return this.$store.state.home.showList
    },
    editInfo: {
      get() {
        return this.$store.state.home.showList.find((item) => item.id === this.id) || '[]'
      },
      set(newVal) {
        const arr = this.showList.concat()
        const a = arr.find((item) => item.id === this.id)
        a = {
          ...a,
          ...newVal,
        }
        this.$store.commit('home/GET_SHOW_LIST', a)
      },
    },
  },
}
</script>

<style scoped>
.container-edit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
}
.head {
  overflow-y: auto;
  height: calc(100% - 250px);
}
.head::-webkit-scrollbar {
  display: none;
}
.editor {
  height: 250px;
  position: relative;
  overflow-y: hidden;
}
.editor::-webkit-scrollbar {
  display: none;
}
.title {
  text-align: center;
  background-color: rgb(84, 111, 198);
  height: 40px;
  line-height: 40px;
}
.editor-title {
  font-size: 14px;
}
.el-icon-rank,
.el-icon-edit {
  padding: 0 8px;
  float: right;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>